<!--全局自定义脚本说明文档-->

<template>
  <div class="custom-js-document-container">
    <Tooltip class="float-right" content="说明" placement="top">
      <a href="javascript:;" class="color-white" @click="remarkDrawerVisible = true">
        <Icon type="ios-help-circle" size="16"/>
      </a>
    </Tooltip>
    <div class="code-item">
      <p class="title">组件实例</p>
      <div>
        <p><Tag color="primary">this</Tag>指向当前组件vm实例</p>
        <p><Tag color="primary">this.chart</Tag>图表组件特有，指向图表容器实例</p>
        <slot name="custom"></slot>
      </div>
    </div>
    <Collapse>
      <Panel name="1">
        展开更多
        <div slot="content">
          <div class="code-item">
            <p class="title">全局对象</p>
            <div>
              <p><Tag color="success">$</Tag>全局JQuery实例对象</p>
              <p><Tag color="success">EventBus</Tag>全局事件总线对象</p>
              <p><Tag color="success">Echarts</Tag>全局Echarts对象</p>
              <p><Tag color="success">PnUtil</Tag>全局通用工具类</p>
              <p><Tag color="success">PnApi</Tag>全局Http工具类</p>
            </div>
          </div>
          <div v-show="showOriginalProps" class="code-item">
            <p class="title">初始化运行脚本中特有变量</p>
            <div>
              <p><Tag color="geekblue">original_ds_apiPath</Tag>原始API接口地址</p>
              <p><Tag color="geekblue">original_ds_sql</Tag>原始SQL语句</p>
              <p><Tag color="geekblue">original_ds_resultObj</Tag>原始结果集对象</p>
            </div>
          </div>
        </div>
      </Panel>
    </Collapse>

    <Drawer title="交互变量说明"
            :width="750"
            placement="left"
            :closable="false"
            :draggable="true"
            transfer
            v-model="remarkDrawerVisible">
      <Markdown :value="documentContent"
                :isPreview="true"
                :theme="'dark'"></Markdown>
    </Drawer>
  </div>
</template>

<script>

  import Markdown from 'vue-meditor'

  export default {
    name: 'CustomJsDocument',
    components: {
      Markdown
    },
    props: {
      showOriginalProps: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        remarkDrawerVisible: false,
        documentContent: ''
      }
    },
    mounted() {
      this.readMarkdownContent()
    },
    methods: {
      readMarkdownContent () {
        let context = require.context('./', true, /\.md$/);
        for (let i=0; i<context.keys().length; i++) {
          if (context.keys()[i].indexOf('CustomJsDocument') > -1) {
            this.documentContent = context(context.keys()[i]);
            break
          }
        }
      }
    }
  }
</script>

<style scoped>
  >>> .markdown.border {
    border: 0px !important;
    height: 100% !important;
  }
  >>> .markdown-preview {
    padding: 0px !important;
  }
</style>

<style lang="less" scoped>
  .custom-js-document-container {
    width: 100%;
    height: auto;
    background-color: #616161;
    border: 2px solid #424242;
    border-radius: 4px;
    color: #fff;
    padding: 10px;
    .code-item {
      margin-bottom: 5px;
      &:last-child {
        margin-bottom: 0px;
      }
      .title {
        margin: 0px 0px 5px 0px;
      }
    }
  }
</style>
